<script setup>
import NavBar from "@/components/common/navbar/NavBar.vue";
import RecommendView from "@/views/home/ChildComps/RecommendView.vue";
import TabControl from "@/components/content/tabControl/TasbControlView.vue";
import {computed, nextTick, onMounted, reactive, ref, watchEffect} from "vue";
import {getHomeAllData, getHomeGoods} from "@/network/home";
import GoodsList from "@/components/content/goods/GoodsList.vue";
import BScroll from "better-scroll";
import BackTop from "@/components/common/backtop/BackTop.vue";
import HomeSwiper from "@/views/home/ChildComps/HomeSwiper.vue";


const isTabFixed = ref(false);
const isShowBackTop = ref(false)
const banRef = ref(null)
const recommends = ref([]);
const currentType = ref('sales');
const banners = ref([]);

const goods = reactive({
	new: {page: 0, list: []},
	sales: {page: 0, list: []},
	recommend: {page: 0, list: []}
})
let bScroll = reactive({});

const tabClick = (index) => {
	const types = ['sales', 'new', 'recommend'];
	currentType.value = types[index];
	bScroll.refresh()
}
const showGoods = computed(() => {
	return goods[currentType.value].list
})

onMounted(() => {
	getHomeAllData().then(res => {
		const {goods, slides} = res;
		recommends.value = goods.data
		banners.value = [...slides];
	})
	getHomeGoods("sales").then(res => {
		const {data} = res["goods"];
		goods.sales.list = data;
	})
	getHomeGoods("recommend").then(res => {
		const {data} = res["goods"];
		goods.recommend.list = data;
	})
	getHomeGoods("new").then(res => {
		const {data} = res["goods"];
		goods.new.list = data;
	})
	bScroll = new BScroll(document.querySelector('.wrapper'), {
		probeType: 2,
		pullUpLoad: true,
		click: true
	});
	bScroll.on('scroll', (position) => {
		isShowBackTop.value = isTabFixed.value = (-position.y) > banRef.value.offsetHeight
	})
	bScroll.on('pullingUp', () => {
		const page = goods[currentType.value].page + 1
		getHomeGoods(currentType.value, page).then(res => {
			const {data} = res["goods"];
			goods[currentType.value].list.push(...data);
			goods[currentType.value].page += 1;
		})
		bScroll.finishPullUp()
		nextTick(() => {
			bScroll && bScroll.refresh()
		})
	})

})
// 监听任何一个有变化的变量
watchEffect(() => {
	nextTick(() => {
		bScroll && bScroll.refresh()
	})
})
const bTop = () => {
	bScroll.scrollTo(0, 0, 500)
}
</script>

<template>
	<div class="home">
		<nav-bar>
			<template v-slot:default>图书兄弟</template>
		</nav-bar>
		<tab-control v-show="isTabFixed " :titles="['畅销','新书','精选']" @tabClick="tabClick"></tab-control>
		<div class="wrapper">
			<div class="content">
				<div ref="banRef">
					<home-swiper :banners="banners"></home-swiper>
					<recommend-view :recommends="recommends"></recommend-view>
				</div>

				<tab-control :titles="['畅销','新书','精选']" @tabClick="tabClick"></tab-control>

				<goods-list :goods="showGoods"></goods-list>
			</div>
		</div>
		<back-top v-show="isShowBackTop" @bTop="bTop"></back-top>
	</div>
</template>

<style lang="scss" scoped>


.home {
	height: 100vh;
	position: relative;

	.wrapper {
		position: absolute;
		top: 45px;
		left: 0;
		right: 0;
		bottom: 50px;
		overflow: hidden;
	}
}
</style>